import React, { Component } from 'react';
import { Modal, Button, Form, Input, Spin } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import {connect} from 'react-redux'

// 导入自定义组件
import { DoRegister } from '../../redux/actions/register'
import { DoLogin } from '../../redux/actions/login';
import { ChangeSpinACtivate } from '../../redux/actions/public'
import RegistrationForm from './registerForm'


// 用户登录弹窗代码
class Register extends Component {

  // 取消按钮
  handleCancel = () => {
    const obj = {
        isRegister: false
    }
    this.props.DoRegister(obj)
    this.props.ChangeSpinACtivate({register_activate: false})
  }

  // 点击右侧返回登录页面
  handleLogin = () => {
    const obj = {
        isRegister: false
    }
    this.props.DoRegister(obj)
    const obj1 = {
        activate: true
    }
    this.props.DoLogin(obj1)
  }

  render() {
    // 获得提交的状态
    const { UserLoginState } = this.props
    return (
      <div>
          <Modal
            // mask={true} // 遮盖层
            maskClosable={false} // 点击空白处不关闭
            // maskStyle = '#ff0000'
            visible={UserLoginState.isRegister}
            title="用户注册"
            onCancel={this.handleCancel}
            footer={[
              <Button 
                key="submit" 
                type="primary" 
                onClick={this.handleCancel}>
                取消
              </Button>,
              <Button
                key="submit1"
                type="primary"
                onClick={this.handleLogin}
              >
                返回登录
              </Button>,
            ]}
          >
            <RegistrationForm />
          </Modal>
      </div>
    );
  }
}

export default connect(
  state => ({
    UserLoginState: state.PublicReducer.userLoginState
  }),
  {
    DoRegister,
    DoLogin,
    ChangeSpinACtivate  
  }
)(Register)
